<div class="chart-doughnut">
  <svg id="chart1" viewBox="0 0 1024 790" [@flyInOut]="{value:'in',params:configer.animation}">
    <path [attr.d]="background.str" [attr.transform]="background.transform" class="charbackground"></path>
    <path [attr.d]="path" [attr.transform]="frontArc.transform" class="charts" [attr.stroke]="configer.color"></path>
    <text class="minmax" [attr.transform]="frontArc.mintransform">{{configer.min}}</text>
    <text class="minmax" [attr.transform]="frontArc.maxtransform">{{configer.max}}</text>
    <g class="main" [attr.transform]="frontArc.valuetransform">
      <text class="big" id="valuetext">{{ animateDisalbe==false ? animateValue: chartValue}}<tspan
          style="font-size:0.68em;opacity:0.75">{{configer.unit}}</tspan></text>
    </g>
    <text [attr.transform]="frontArc.titletransform">{{configer.title}}</text>
  </svg>
</div>
